<template>
    <div class="quanbu">
        <div :class="zhuantai == 1 ? 'xianshi' : ''" class="diyi">
            <div class="sidiv">
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">总销售额</span>
                        <span class="jiage">￥126550</span>
                        <div class="xiang">
                            <p>
                                <span>周同比</span>
                                <span>12%</span>
                                <svg style="width: 25px;height: 15px;" t="1719295668705" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4247"
                                    width="200" height="200">
                                    <path d="M288.864 636.032 511.968 405.312 735.136 636Z" p-id="4248" fill="#d81e06">
                                    </path>
                                </svg>
                                <span>日同比</span>
                                <span>11%</span>
                                <svg style="width: 25px;height: 15px;" t="1719295848137" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4457"
                                    width="200" height="200">
                                    <path d="M735.136 405.28 512 636 288.864 405.28Z" p-id="4458" fill="#1afa29"></path>
                                </svg>
                            </p>
                        </div>
                        <span class="xiaoti">日均销售额￥234.56</span>
                    </div>
                </div>
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">订单量</span>
                        <span class="jiage">8846</span>
                        <div class="xiang" ref="chart1">
                        </div>
                        <span class="xiaoti">日订单量￥234.56</span>
                    </div>
                </div>
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">支付笔数</span>
                        <span class="jiage">6565</span>
                        <div class="xiaog" ref="chart2">
                        </div>
                        <span class="xiaoti">转化率60%</span>
                    </div>
                </div>
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">运营活动效果</span>
                        <span class="jiage">78%</span>
                        <div class="xiang">
                            <progress class="jue chuijz" max="100" value="60"></progress>
                        </div>
                        <span class="xiaoti">
                            <span>周同比</span>
                            <span>12%</span>
                            <svg style="width: 25px;height: 15px;" t="1719295668705" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4247" width="200" height="200">
                                <path d="M288.864 636.032 511.968 405.312 735.136 636Z" p-id="4248" fill="#d81e06"></path>
                            </svg>
                            <span>日同比</span>
                            <span>11%</span>
                            <svg style="width: 25px;height: 15px;" t="1719295848137" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4457" width="200" height="200">
                                <path d="M735.136 405.28 512 636 288.864 405.28Z" p-id="4458" fill="#1afa29"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
            <div class="datubiao">
                <div class="xiang" style="width: 100%;height: 60px;">
                    <div>
                        <span :class="xhaoshou == 1 ? 'bian' : ''" class="xiaoshou" @click="xhaoshou = 1">销售额</span>
                        <span :class="xhaoshou == 2 ? 'bian' : ''" class="xiaoshou" @click="xhaoshou = 2">销售趋势</span>
                    </div>
                    <div class="jue riqi">
                        <span>今日</span>
                        <span>本周</span>
                        <span>本月</span>
                        <span>本年</span>
                        <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期"
                            style="margin-right: 10px;width: 300px;" end-placeholder="结束日期" :default-time="['12:00:00']">
                        </el-date-picker>
                    </div>
                </div>
                <div :class="xhaoshou == 1 ? 'yincang' : ''" class="xiang" style="width: 100%;height: 340px;display: none;">
                    <div style="height: 100%;width: 70%;" ref="chart3"></div>
                    <div class="jue" style="height: 100%;width: 30%;top: 0;right: 0;">
                        <h4 style="font-size: 14px;margin-top: 20px;">门店销售排行榜</h4>
                        <div class="biaoge">
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: black; color: white;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: black; color: white;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: black; color: white;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                        </div>
                    </div>
                </div>
                <div :class="xhaoshou == 2 ? 'yincang' : ''" class="xiang" style="width: 100%;height: 340px;display: none;">
                    <div style="height: 100%;width: 70%;" ref="chart4"></div>
                    <div class="jue" style="height: 100%;width: 30%;top: 0;right: 0;">
                        <h4 style="font-size: 14px;margin-top: 20px;">门店销售排行榜</h4>
                        <div class="biaoge">
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: black; color: white;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: black; color: white;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: black; color: white;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                            <p class="xiang"><span class="shuliang"
                                    style="background-color: #cccccc; color: black;">1</span><span class="neir">白鹭岛 1
                                    号店</span><span class="liang jue">123456</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="datubiao">
                <div class="xiang" style="width: 100%;height: 60px">
                    <div>
                        <span class="xiaoshou">最近一周访问量统计</span>
                    </div>

                </div>
                <div class="xiang" style="width: 100%;height: 340px;" ref="chart5">
                </div>
            </div>
        </div>
        <div :class="zhuantai == 2 ? 'xianshi' : ''" class="dier">
            <div class="sidiv">
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">总销售额</span>
                        <span class="jiage">￥126550</span>
                        <div class="xiang" ref="chart6">
                        </div>
                        <span class="xiaoti">日均销售额￥234.56</span>
                    </div>
                </div>
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">订单量</span>
                        <span class="jiage">8846</span>
                        <div class="xiang" ref="chart7">
                        </div>
                        <span class="xiaoti">日订单量￥234.56</span>
                    </div>
                </div>
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">支付笔数</span>
                        <span class="jiage">6565</span>
                        <div class="xiaog" ref="chart8">
                        </div>
                        <span class="xiaoti">转化率60%</span>
                    </div>
                </div>
                <div class="xiang">
                    <div class="sineir jue scjz">
                        <span class="xiaoti">运营活动效果</span>
                        <span class="jiage">78%</span>
                        <div class="xiang" ref="chart9">
                        </div>
                        <span class="xiaoti">
                            <span>周同比</span>
                            <span>12%</span>
                            <svg style="width: 25px;height: 15px;" t="1719295668705" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4247" width="200" height="200">
                                <path d="M288.864 636.032 511.968 405.312 735.136 636Z" p-id="4248" fill="#d81e06"></path>
                            </svg>
                            <span>日同比</span>
                            <span>11%</span>
                            <svg style="width: 25px;height: 15px;" t="1719295848137" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4457" width="200" height="200">
                                <path d="M735.136 405.28 512 636 288.864 405.28Z" p-id="4458" fill="#1afa29"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
            <div class="datubiao">
                <div class="xiang" style="width: 100%;height: 60px;">
                    <div>
                        <span :class="xhaoshi == 1 ? 'bian' : ''" class="xiaoshou" @click="xhaoshi = 1">销售额</span>
                        <span :class="xhaoshi == 2 ? 'bian' : ''" class="xiaoshou" @click="xhaoshi = 2">销售趋势</span>
                        <span :class="xhaoshi == 3 ? 'bian' : ''" class="xiaoshou" @click="xhaoshi = 3">销售趋势</span>
                    </div>
                    <div class="jue riqi">
                        <span>今日</span>
                        <span>本周</span>
                        <span>本月</span>
                        <span>本年</span>
                        <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期"
                            style="margin-right: 10px;width: 300px;" end-placeholder="结束日期" :default-time="['12:00:00']">
                        </el-date-picker>
                    </div>
                </div>
                <div :class="xhaoshi == 1 ? 'yincang' : ''" class="xiang" style="width: 100%;height: 340px;display: none;">
                    <div style="height: 100%;width: 70%;" ref="chart10"></div>
                    <div class="jue" style="height: 100%;width: 30%;top: 0;right: 0;">
                        <h4>快速开始</h4>
                        <hr style="margin-top: 20px;">
                        <div style="margin-top: 30px; width: 90%;">
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button><br>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                        </div>
                    </div>
                </div>
                <div :class="xhaoshi == 2 ? 'yincang' : ''" class="xiang" style="width: 100%;height: 340px;display: none;">
                    <div style="height: 100%;width: 70%;" ref="chart11"></div>
                    <div class="jue" style="height: 100%;width: 30%;top: 0;right: 0;">
                        <h4>快速开始</h4>
                        <hr style="margin-top: 20px;">
                        <div style="margin-top: 30px; width: 90%;">
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button><br>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                        </div>
                    </div>
                </div>
                <div :class="xhaoshi == 3 ? 'yincang' : ''" class="xiang" style="width: 100%;height: 340px;display: none;">
                    <div style="height: 100%;width: 70%;" ref="chart12"></div>
                    <div class="jue" style="height: 100%;width: 30%;top: 0;right: 0;">
                        <h4>快速开始</h4>
                        <hr style="margin-top: 20px;">
                        <div style="margin-top: 30px; width: 90%;">
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button><br>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                            <el-button class="yewu" type="primary" plain>主要按钮</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="datubiao">
                <div class="xiang" style="width: 100%;height: 60px">
                    <div>
                        <span :class="xhaozhi == 1 ? 'bian' : ''" class="xiaoshou" @click="xhaozhi = 1">业务流程限时监管</span>
                        <span :class="xhaozhi == 2 ? 'bian' : ''" class="xiaoshou" @click="xhaozhi = 2">业务节点限时监管</span>
                    </div>
                </div>
                <div class="xiang" style="width: 100%;height: 340px;">
                    <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ fontSize: '14px', color: '#000000', backgroundColor: '#eef1f6' }">
                        <el-table-column label="业务号" align="center">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="业务类型" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="受理人" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="受理时间" align="center">
                        </el-table-column>
                        <el-table-column prop="prop" label="当前节点" align="center">
                        </el-table-column>
                        <el-table-column prop="time" label="办理时长" align="center">
                            <template slot-scope="scope">
                                <progress style="width: 70px;" max="100" :value="scope.row.time"></progress>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div :class="zhuantai == 3 ? 'xianshi' : ''" class="disan">
            <div class="san">
                <div>
                    <div class="xiang" style="height: 40px;background-color: #7196fb;color: white">
                        <span class="daiban">我的代办【5】</span>
                        <span class="geng jue " style="right: 10px;">更多>></span>
                    </div>
                    <div class="daibanbiao">
                        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                            :header-cell-style="{ fontSize: '14px', color: '#000000', backgroundColor: '#eef1f6' }">
                            <el-table-column label="业务号" align="center">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="业务类型" align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="受理人" align="center">
                            </el-table-column>
                            <el-table-column prop="address" label="受理时间" align="center">
                            </el-table-column>
                            <el-table-column prop="prop" label="当前节点" align="center">
                            </el-table-column>
                            <el-table-column prop="time" label="办理时长" align="center">
                                <template>
                                    <span style="color:blue" @click="banli()">办理</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div>
                    <div class="xiang" style="height: 40px;background-color: #7196fb;color: white">
                        <span class="daiban">我的代办【5】</span>
                        <span class="geng jue " style="right: 10px;">更多>></span>
                    </div>
                    <div class="daibanbiao">
                        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                            :header-cell-style="{ fontSize: '14px', color: '#000000', backgroundColor: '#eef1f6' }">
                            <el-table-column label="业务号" align="center">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="业务类型" align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="受理人" align="center">
                            </el-table-column>
                            <el-table-column prop="address" label="受理时间" align="center">
                            </el-table-column>
                            <el-table-column prop="prop" label="当前节点" align="center">
                            </el-table-column>
                            <el-table-column prop="time" label="办理时长" align="center">
                                <template>
                                    <span style="color:blue" @click="banli()">办理</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div>
                    <div class="xiang" style="height: 40px;background-color: #7196fb;color: white">
                        <span class="daiban">我的代办【5】</span>
                        <span class="geng jue " style="right: 10px;">更多>></span>
                    </div>
                    <div class="daibanbiao">
                        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                            :header-cell-style="{ fontSize: '14px', color: '#000000', backgroundColor: '#eef1f6' }">
                            <el-table-column label="业务号" align="center">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="业务类型" align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="受理人" align="center">
                            </el-table-column>
                            <el-table-column prop="address" label="受理时间" align="center">
                            </el-table-column>
                            <el-table-column prop="prop" label="当前节点" align="center">
                            </el-table-column>
                            <el-table-column prop="time" label="办理时长" align="center">
                                <template>
                                    <span style="color:blue" @click="banli()">办理</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div>
                    <div class="xiang" style="height: 40px;background-color: #7196fb;color: white">
                        <span class="daiban">我的代办【5】</span>
                        <span class="geng jue " style="right: 10px;">更多>></span>
                    </div>
                    <div class="daibanbiao">
                        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                            :header-cell-style="{ fontSize: '14px', color: '#000000', backgroundColor: '#eef1f6' }">
                            <el-table-column label="业务号" align="center">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="业务类型" align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="受理人" align="center">
                            </el-table-column>
                            <el-table-column prop="address" label="受理时间" align="center">
                            </el-table-column>
                            <el-table-column prop="prop" label="当前节点" align="center">
                            </el-table-column>
                            <el-table-column prop="time" label="办理时长" align="center">
                                <template>
                                    <span style="color:blue" @click="banli()">办理</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>


        <div>
            <form action="" style="font-size: 14px;color: #cccccc;text-align: right ; margin: 20px 0;">
                请选择首页样式：
                <label style="padding: 0 10px;"><input style="margin-right: 6px;" type="radio" name="homeStyle"
                        value="statistics" @click="zhuantai = 1">统计图表</label>
                <label style="padding: 0 10px;"><input style="margin-right: 6px;" type="radio" name="homeStyle"
                        value="statistics2" @click="zhuantai = 2">统计图表2</label>
                <label style="padding: 0 10px;"><input style="margin-right: 6px;" type="radio" name="homeStyle"
                        value="taskTable" @click="zhuantai = 3">任务表格</label>
            </form>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            tableData: [{
                date: '转移登记',
                name: '张三',
                address: '2019-01-21',
                prop: '任务分配',
                time: '60'
            }, {
                date: '转移登记',
                name: '张三',
                address: '2019-01-21',
                prop: '任务分配',
                time: '60'
            }, {
                date: '转移登记',
                name: '张三',
                address: '2019-01-21',
                prop: '任务分配',
                time: '60'
            }, {
                date: '转移登记',
                name: '张三',
                address: '2019-01-21',
                prop: '任务分配',
                time: '60'
            },],
            chart1: null,
            chart2: null,
            chart3: null,
            chart4: null,
            chart5: null,
            chart6: null,
            chart7: null,
            chart8: null,
            chart9: null,
            chart10: null,
            chart11: null,
            list: [], // 示例数据数组
            value1: '',
            value2: '',
            xhaoshou: 1,
            xhaoshi: 1,
            xhaozhi: 1,
            zhuantai: 1,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.chart1 = echarts.init(this.$refs.chart1, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart1.setOption({
                grid: {
                    left: '-13%',
                    right: '1%',
                    bottom: '0%',
                    top: '2%',
                    containLabel: true // Ensure the chart fits within the container
                },
                xAxis: {
                    show: false, // 隐藏X轴
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    show: false, // 隐藏Y轴
                    type: 'value'
                },
                series: [
                    {
                        data: [700, 555, 50, 880, 300, 70, 800],
                        type: 'line',
                        smooth: true, // 使用平滑线
                        showSymbol: false, // 不显示折点
                        areaStyle: {
                            color: '#74bcff'  // 修改填充颜色，这里示例为淡蓝色
                        },
                        lineStyle: {
                            color: '#74bcff'  // 修改折线颜色，这里示例为蓝色
                        }
                    }
                ],
                title: {
                    show: false // 隐藏标题
                },
                legend: {
                    show: false // 隐藏图例
                }
            });

            this.chart2 = echarts.init(this.$refs.chart2, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart2.setOption({
                grid: {
                    left: '-6%',
                    right: '0%',
                    bottom: '0%',
                    top: '2%',
                    containLabel: true // Ensure the chart fits within the container
                },
                xAxis: {
                    show: false, // 隐藏X轴
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    show: false, // 隐藏Y轴
                    type: 'value'
                },
                series: [
                    {
                        data: [700, 555, 50, 880, 300, 70, 800, 600, 400, 300],
                        type: 'bar', // 修改为柱状图
                        itemStyle: {
                            color: '#74bcff', // 修改柱状图颜色，这里示例为淡蓝色
                            barWidth: 4 // 调整柱子宽度，单位像素
                        }
                    }
                ],
                title: {
                    show: false // 隐藏标题
                },
                legend: {
                    show: false // 隐藏图例
                }
            });

            this.chart3 = echarts.init(this.$refs.chart3, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart3.setOption({
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true // Ensure the chart fits within the container
                },
                title: {
                    text: '销售额排行', // Add title here
                    left: 'left', // Position on the left
                    top: 14, // Position on the top

                    textStyle: {
                        fontSize: 14 // Font size of the title
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] // Adjusted to 12 months
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130, 100, 210, 180, 160, 190], // Adjust data accordingly
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            });

            this.chart4 = echarts.init(this.$refs.chart4, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart4.setOption({
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true // Ensure the chart fits within the container
                },
                title: {
                    text: '销售额排行', // Add title here
                    left: 'left', // Position on the left
                    top: 14, // Position on the top

                    textStyle: {
                        fontSize: 14 // Font size of the title
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] // Adjusted to 12 months
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130, 100, 210, 180, 160, 190], // Adjust data accordingly
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            });

            this.chart5 = echarts.init(this.$refs.chart5, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart5.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: 'Highest',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: 'Lowest',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: 'Avg' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: 'Max'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            });

            this.chart6 = echarts.init(this.$refs.chart6, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart6.setOption({
                grid: {
                    left: '-13%',
                    right: '1%',
                    bottom: '0%',
                    top: '2%',
                    containLabel: true // Ensure the chart fits within the container
                },
                xAxis: {
                    show: false, // 隐藏X轴
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    show: false, // 隐藏Y轴
                    type: 'value'
                },
                series: [
                    {
                        data: [700, 555, 50, 880, 300, 70, 800],
                        type: 'line',
                        smooth: true, // 使用平滑线
                        showSymbol: false, // 不显示折点
                        areaStyle: {
                            color: '#74bcff'  // 修改填充颜色，这里示例为淡蓝色
                        },
                        lineStyle: {
                            color: '#74bcff'  // 修改折线颜色，这里示例为蓝色
                        }
                    }
                ],
                title: {
                    show: false // 隐藏标题
                },
                legend: {
                    show: false // 隐藏图例
                }
            });

            this.chart7 = echarts.init(this.$refs.chart7, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart7.setOption({
                grid: {
                    left: '-6%',
                    right: '0%',
                    bottom: '0%',
                    top: '2%',
                    containLabel: true // Ensure the chart fits within the container
                },
                xAxis: {
                    show: false, // 隐藏X轴
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    show: false, // 隐藏Y轴
                    type: 'value'
                },
                series: [
                    {
                        data: [700, 555, 50, 880, 300, 70, 800, 600, 400, 300],
                        type: 'bar', // 修改为柱状图
                        itemStyle: {
                            color: '#74bcff', // 修改柱状图颜色，这里示例为淡蓝色
                            barWidth: 4 // 调整柱子宽度，单位像素
                        }
                    }
                ],
                title: {
                    show: false // 隐藏标题
                },
                legend: {
                    show: false // 隐藏图例
                }
            });

            this.chart8 = echarts.init(this.$refs.chart8, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart8.setOption({
                grid: {
                    left: '-13%',
                    right: '1%',
                    bottom: '0%',
                    top: '2%',
                    containLabel: true // Ensure the chart fits within the container
                },
                xAxis: {
                    show: false, // 隐藏X轴
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    show: false, // 隐藏Y轴
                    type: 'value'
                },
                series: [
                    {
                        data: [700, 555, 50, 880, 300, 70, 800],
                        type: 'line',
                        smooth: true, // 使用平滑线
                        showSymbol: false, // 不显示折点
                        areaStyle: {
                            color: '#74bcff'  // 修改填充颜色，这里示例为淡蓝色
                        },
                        lineStyle: {
                            color: '#74bcff'  // 修改折线颜色，这里示例为蓝色
                        }
                    }
                ],
                title: {
                    show: false // 隐藏标题
                },
                legend: {
                    show: false // 隐藏图例
                }
            });

            this.chart9 = echarts.init(this.$refs.chart9, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart9.setOption({
                grid: {
                    left: '-6%',
                    right: '0%',
                    bottom: '0%',
                    top: '2%',
                    containLabel: true // Ensure the chart fits within the container
                },
                xAxis: {
                    show: false, // 隐藏X轴
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    show: false, // 隐藏Y轴
                    type: 'value'
                },
                series: [
                    {
                        data: [700, 555, 50, 880, 300, 70, 800, 600, 400, 300],
                        type: 'bar', // 修改为柱状图
                        itemStyle: {
                            color: '#74bcff', // 修改柱状图颜色，这里示例为淡蓝色
                            barWidth: 4 // 调整柱子宽度，单位像素
                        }
                    }
                ],
                title: {
                    show: false // 隐藏标题
                },
                legend: {
                    show: false // 隐藏图例
                }
            });

            this.chart10 = echarts.init(this.$refs.chart10, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart10.setOption({
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true // Ensure the chart fits within the container
                },
                title: {
                    text: '销售额排行', // Add title here
                    left: 'left', // Position on the left
                    top: 14, // Position on the top

                    textStyle: {
                        fontSize: 14 // Font size of the title
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] // Adjusted to 12 months
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130, 100, 210, 180, 160, 190], // Adjust data accordingly
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            });

            this.chart11 = echarts.init(this.$refs.chart11, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart11.setOption({
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true // Ensure the chart fits within the container
                },
                title: {
                    text: '销售额排行', // Add title here
                    left: 'left', // Position on the left
                    top: 14, // Position on the top

                    textStyle: {
                        fontSize: 14 // Font size of the title
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] // Adjusted to 12 months
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130, 100, 210, 180, 160, 190], // Adjust data accordingly
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            });

            this.chart12 = echarts.init(this.$refs.chart12, null, { resize: true });
            // 设置图表的基本配置项（只需设置一次）
            this.chart12.setOption({
                series: [
                    {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 25,
                            color: '#999',
                            fontSize: 20
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 80,
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 70
                            }
                        ]
                    }
                ]
            });


        })
    },
    methods: {
        banli() {
            this.$message({
                type: 'success',
                message: '办理成功!'
            })
        }
    }
}
</script>

<style lang="less" scoped>
.quanbu {
    width: 98%;
    margin: 0 auto;

    // background-color: aqua;
}

.diyi {
    height: 1050px;
    display: none;
}

.dier {
    height: 1050px;
    display: none;
}

.sidiv {
    width: 100%;
    height: 200px;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;

}

.sidiv>div {
    width: 23%;
    height: 200px;
    background-color: white;

}

.sineir {
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    div {
        width: 100%;
        height: 60px;
        border-bottom: 1px #e8e8e8 solid;
    }

    div>p {
        margin-top: 20px;
    }

    div span {
        font-size: 14px;
        color: #a2a3a2;
    }
}

.xiaoti {
    font-size: 14px;
    color: #a2a3a2;
}

.jiage {
    font-size: 30px;
}

.datubiao {
    width: 100%;
    height: 400px;
    background-color: white;
    margin-top: 20px;
}

.xiaoshou {
    display: inline-block;
    height: 60px;
    padding: 20px;
    color: #000;
    font-size: 16px;
}

.riqi {
    top: 0;
    right: 0;

    span {
        display: inline-block;
        margin-right: 30px;
        color: #1890ff;
        font-size: 16px;
        line-height: 60px;
    }
}

.biaoge {
    margin-top: 30px;
    width: 100%;

    p {
        width: 90%;
        margin: 0 auto;
        margin-top: 16px;

        .shuliang {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }

        .neir {
            font-size: 12px;
            color: #595959;
            margin-left: 30px;
        }

        .liang {
            font-size: 12px;
            color: #595959;
            right: 0;
        }
    }
}

.bian {
    color: #1890ff;
}

.yincang {
    display: block !important;
}

.yewu {
    margin: 20px 40px 0px 40px;
    padding: 5px;
}

.disan {
    display: none;
    width: 100%;
    height: 700%;
}

.san {
    width: 100%;
    height: 700px;
    display: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.san>div {
    width: 49.5%;
    height: 320px;

    .daiban,
    .geng {
        margin-left: 10px;
        font-size: 18px;
        line-height: 40px;
    }

}

.daibanbiao {
    width: 96%;
    height: 250px;
    margin: 0 auto;
    margin-top: 14px;
}

.xianshi {
    display: block;
}

</style>